page {
    height: 100%; //屏幕高度自适应
}

.cantainer {
    height: 100%; //继承页面的高度

    .img {
        width: 90rpx;
        position: fixed;
        bottom: 30rpx;
        right: 40rpx;
        z-index: 500;
    }

    // 左右菜单栏容器
    .menu {
        display: flex; //伸缩盒子
        // height: ~'calc(100vh - 90rpx)'; //高度为整个页面减去搜索框的高度
        height: 100vh;

        //左侧菜单栏
        .left_menu {
            background-color: #F8F8FF; //背景颜色
            flex: 1; //占1/4
            height: 100vh;

            //左侧菜单栏中的单个选项框
            .left_menu_item {
                display: flex; //伸缩盒子
                justify-content: center; //水平居中
                align-items: center; //垂直居中
                height: 90rpx; //高度
                font-size: 32rpx; //字体大小
            }

            //激活选中状态
            .active {
                font-weight: bolder; //字体加粗
                border-left: 5rpx solid #000; //选项框的左边界为黑色
                background-color: #FFFFFF; //背景颜色为白色
            }
        }

        // 右菜单栏
        .right_menu {
            flex: 3; //占1/4
            // 分类容器
            display: flex;
            height: 100%;
            flex-direction: column; //主轴变为竖直方向

            // 类型的容器
            .type_cantainer {

                // 防止跟随资源项一起滑动
                position: sticky;
                top: 0;
                z-index: 300;


                display: flex; //伸缩盒子

                // 分类项
                .type_catainer_item {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 50%; //占容器的一半
                    height: 90rpx; //高度为90rpx
                    background-color: #F8F8FF;
                    color: var(--themecolor);
                }

                // 激活选中效果
                .active {
                    color: #000;
                    font-weight: bolder;
                    background-color: #FFFFFF; //背景颜色为白色
                }
            }

            // 资源容器
            .resource_cantainer {
                display: flex; //伸缩盒子
                flex-direction: column; //主轴方向为竖直方向
                width: 100%; //宽度继承父元素
                height: ~'calc(100vh - 90rpx)'; //页面高度减去右侧菜单栏的高度，定义好高度，防止左边菜单栏跟随滑动

                // 资源项
                .resource_item {
                    display: flex; //伸缩盒子
                    justify-content: center;
                    align-items: center;
                    border-bottom: 2rpx solid #ccc; //底部边框
                    margin: 10rpx 0 0 0; //上外边距 10rpx
                    height: 180rpx; //总高度180rpx

                    // 左边图片的容器
                    .left {
                        
                        height: 180rpx; //总高度180rpx
                        flex: 1; //占1/5
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-left: 1%; //左外边距
                        margin-right: 3%; //右外边距


                    }

                    //右边资源信息的容器（包括三部分:资源名称、资源类型和大小、资源的浏览量和时间）
                    .right {
                        height: 180rpx; //总高度180rpx
                        flex: 4; //占4/5
                        display: flex;
                        flex-direction: column;
                        width: 100%; //宽度继承父元素
                        position: relative;
                        // 单个资源的名称
                        .item_name {
                            height: 80rpx; //容纳文本的边框高度
                            font-size: 30rpx; //文字大小
                            width: 55vw; //给文本边框设置宽度，需要给文本设置边框，否则会挤占其他布局
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2; //规定行数
                            -webkit-box-orient: vertical;
                        }

                        // 单个资源的类型和大小字符串
                        .item_size {
                            height: 50rpx; //高度50rpx
                            font-size: 24rpx; //字体大小
                            color: var(--themecolor); //颜色
                            display: flex;
                            align-items: flex-end; //与侧轴底部对齐
                        }

                        .dele_comment {
                            position: absolute;
                            z-index: 300;
                            right: 35rpx;
                            background-color: white;
                            // background-color: black; //按钮背景颜色
                            display: flex;
                            justify-content: flex-end;
                            align-items: flex-end;
                            height: 40rpx;
                            width: 160rpx;
                            font-size: 18rpx;
                            color: var(--themecolor);
                            text-decoration: underline;
                        }

                        // 单个资源的浏览量和上传时间
                        .show {
                            width: 100%;
                            height: 50rpx; //高度50rpx
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            // 浏览量容器
                            .scan {
                                flex: 2; //占容器的2/7
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                height: 20rpx; //高度20rpx

                                // 图标
                                image {
                                    height: 100%; //高度继承父元素，然后mode=“heightFix”
                                }

                                // 文字
                                .num {
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    margin-left: 10rpx; //左外边距
                                    color: var(--themecolor);
                                    font-size: 24rpx; //字体大小
                                }
                            }

                            // 上传时间
                            .time {
                                flex: 5; //占容器的5/7
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                height: 20rpx; //高度20rpx

                                image {
                                    height: 100%; //高度继承父元素，然后mode=“heightFix”
                                }

                                .num {
                                    display: flex;
                                    margin-left: 10rpx;
                                    justify-content: center;
                                    align-items: center;
                                    color: var(--themecolor);
                                    font-size: 24rpx;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}